<template>
  <div class="member-level">
      <div class="member">
          <div class="text">
				{{ levelName }}专属折扣
				<i 
				@click="showTip = true"
				class="iconfont icon-rule_icon tips-icon"></i>
			</div>
          <div class="discount-info">
            <!-- <div class="icon-member icon" :class="'level'+ levelNumber">{{ levelFlag }}</div> -->
            <span class="discount">{{ levelDiscount }}折</span>
            <img  @click="changeChose" :src="isUseMemberLevel === 1 ? imgSrc[0] : imgSrc[1]" />
          </div>
      </div>
			<invoice-tip :showTip="showTip" @closeTip="showTip = false"></invoice-tip>
  </div>
</template>

<script>
import invoiceTip from "./invoiceTip";
export default {
		props: {
			showMemberLevel: {
				type: Boolean,
				default: false,
			},
			// 会员等级相关数据
			memberLevelInfo: {
				default: ()=>{},
			}
		},
		components: {
			invoiceTip
		},
		watch: {
			memberLevelInfo: {
				handler(v) {
					if (!v) return;
					const { rank_name , level_member_discount_ratio, rank_flag, member_rank} = v;
					this.levelDiscount = level_member_discount_ratio/10,
					this.levelName = 	rank_name
					this.levelNumber = member_rank || 1
					this.levelFlag = rank_flag || ''
				},
				immediate: true
			}
		},

    data(){
        return{
				imgSrc: [
					require("../../assets/checked.png"),
					require("../../assets/uncheckd.png")
				],
				isUseMemberLevel: 1, //是否使用
				levelDiscount:0, //折扣
				levelNumber: 1, // 等级
				levelName:'折扣名称', //折扣名称
				levelFlag: '', //等级名称
				showTip:false
        }
    },
    methods: {
        changeChose(){
            this.isUseMemberLevel === 1 ? this.isUseMemberLevel = 0 : this.isUseMemberLevel = 1
						this.$emit('change', this.isUseMemberLevel);
        }
    },

}
</script>

<style lang="scss" scoped>
.member-level{
	background: #ffffff;
	margin: .2rem 0;
	padding: .3rem;
	.member{
		display: flex;
    justify-content: space-between;
    align-items: center;
		font-size: 0.28rem;
		color: #333333;
		.tips-icon{
			font-size: .28rem;
			color: #999;
		}
		.discount-info{
			display: flex;
			align-items: center;
			.icon{
				width: 1.04rem;
				height: .32rem;
				text-align: center;
				border-radius: .32rem;
				border: .01rem solid #ffffff1a;
				font-size: .2rem;
				line-height: .32rem;
				font-weight: 500;
			}
			.level1{
				color: #3A72AE;
				background: linear-gradient(27deg, #E7F4FF 1.56%, #BAD9F9 99.72%);
			}
			.level2{
				color: #E59466;
				background: linear-gradient(27deg, #FFF8F6 1.56%, #FBD0B7 99.72%);
			}
			.level3{
				color: #E7940F;
				background: linear-gradient(27deg, #FFF8F6 1.56%, #FBD0B7 99.72%);
			}
			.level4{
				color: #D95E60;
				background: linear-gradient(27deg, #FFF8F6 1.56%, #FBD0B7 99.72%);
			}
			.level5{
				color: #5D6ABA;
				background: linear-gradient(27deg, #F0F2FF 1.56%, #B1B6FA 99.72%);
			}
			.level6{
				color: #E4EBF7;
				background: linear-gradient(27deg, #085693 1.56%, #023A77 99.72%);
			}
			.level7{
				color: #E4EBF7;
				background: linear-gradient(27deg, #4354B7 1.56%, #17308E 99.72%);
			}
			.level8{
				color: #E4EBF7;
				background: linear-gradient(27deg, #5244AA 1.56%, #3B1567 99.72%);
			}
			.level9{
				color: #F6EDFF;
				background: linear-gradient(27deg, #5C3087 1.56%, #130E1E 99.72%);
			}
		}
		.discount{
				margin-left: 0.2rem;
		}
		img{
				vertical-align: middle;
				width: 0.32rem;
				height: 0.32rem;
				margin-left: 0.16rem;
		}
	}
}
</style>